<template>
  <div class="app-container">
    <el-card shadow="never" class="custom-card">
      <div slot="header" class="detail-card-header">
        <span>订单详情</span>
      </div>
      <div class="order-content">
        <div style="font-size: 12px">基本信息</div>
        <table style="margin-top: 10px">
          <tr>
            <th>订单号</th>
            <th>用户名</th>
            <th>下单时间</th>
            <th>支付方式</th>
            <th>支付时间</th>
            <th>订单状态</th>
          </tr>
          <tr>
            <td class="one-td">{{ order.orderSn }}</td>
            <td class="one-td">{{ order.memberUsername }}</td>
            <td class="one-td">{{ order.createTime }}</td>
            <td class="one-td">
              <dict-tag v-if="order.payType" :options="dict.type.payment_type" :value="order.payType"/>
              <span v-else> - </span>
            </td>
            <td class="one-td">
              {{ order.paymentTime ? order.paymentTime : '-' }}
            </td>
            <td class="one-td">
              <dict-tag :options="dict.type.order_status" :value="order.status"/>
            </td>
          </tr>
        </table>
        <table>
          <tr>
            <th>使用的优惠券</th>
            <th>物流</th>
            <th>自动收货天数</th>
            <th>获得积分</th>
            <th>获得成长值</th>
            <th>商品数量</th>
          </tr>
          <tr>
            <td>暂无</td>
            <td>暂无</td>
            <td>{{ order.autoConfirmDay + '天' }}</td>
            <td>
              暂无
            </td>
            <td>
              暂无
            </td>
            <td>
              {{ orderLine.length + '件' }}
            </td>
          </tr>
        </table>
        <div style="font-size: 12px;margin-top: 10px">收货人信息</div>
        <table style="margin-top: 10px">
          <tr>
            <th>用户昵称</th>
            <th>收件人姓名</th>
            <th>联系电话</th>
            <th>收货地址</th>
            <th>发货时间</th>
            <th>收货时间</th>
          </tr>
          <tr>
            <td>
              {{ order.memberUsername }}
            </td>
            <td>{{ order.orderSn }}</td>
            <td>{{ order.memberUsername }}</td>
            <td>{{ order.createTime }}</td>
            <td>
              <dict-tag v-if="order.payType" :options="dict.type.payment_type" :value="order.payType"/>
              <span v-else> - </span>
            </td>
            <td>
              {{ order.paymentTime ? order.paymentTime : '-' }}
            </td>
          </tr>
        </table>

        <div style="font-size: 12px;margin-top: 10px">订单项信息</div>
        <table style="margin-top: 10px">
          <tr>
            <th>商品名称</th>
            <th>商品图片</th>
            <th>规格</th>
            <th>金额</th>
            <th>数量</th>
            <th>备注</th>
            <th>总金额</th>
          </tr>
          <tr v-for="(item,index) in orderLine" :key="index">
            <td>{{ item.skuName.length <= 20 ? item.skuName : (item.skuName.substr(0, 20) + '...') }}</td>
            <td>
              <img :src="item.skuPic" width="50px" height="50px">
            </td>
            <td>{{ item.skuAttrsVals }}</td>
            <td>
              {{ item.skuPrice }}
            </td>
            <td>
              {{ item.skuQuantity }}
            </td>
            <td>
              {{ item.remark }}
            </td>
            <td>{{ item.totalAmount }}</td>
          </tr>
        </table>

        <div style="font-size: 12px;margin-top: 10px">费用信息</div>
        <table style="margin-top: 10px">
          <tr>
            <th>费用合计</th>
            <th>实际支付金额</th>
            <th>运费</th>
            <th>优惠券抵扣</th>
            <th>积分抵扣</th>
          </tr>
          <tr>
            <td>{{ ' ¥ ' + order.totalAmount }}</td>
            <td>{{ ' ¥ ' + order.payAmount }}</td>
            <td>{{ ' ¥ ' + order.freightAmount }}</td>
            <td>
              {{ ' ¥ ' + order.couponAmount }}
            </td>
            <td>
              {{ ' ¥ ' + order.integrationAmount }}
            </td>
          </tr>
        </table>

      </div>
    </el-card>
  </div>
</template>

<script>

import {getOrder} from "@/api/order/order";
import {listOrderItemByOrderId} from "@/api/order/orderItem";

export default {
  dicts:['payment_type','order_status'],
  data() {
    return {
      orderId: '',
      order: {},
      orderLine: []
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.getOrder()
    this.getOrderLine()
  },
  methods: {
    getOrder() {
      getOrder(this.orderId).then(res => {
        if (res.success) {
         this.order = res.data
        }
      })
    },
    getOrderLine() {
      listOrderItemByOrderId(this.orderId).then(res => {
        if (res.success) {
          this.orderLine = res.data
        }
      })
    }
  }
}

</script>

<style scoped>
  .detail-card-header {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .order-content {
    width: 100%;
  }

  .custom-card >>> .el-card__header {
    background-color: #F2F6FC;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  th, td {
    border: 1px solid #DCDFE6;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
  }

  .one-td {
    border-bottom: none;
  }

  th {
    background-color: #F2F6FC;
    font-size: 14px;
    font-weight: normal;
  }

  td {
    font-size: 14px;
    font-weight: normal;
    color: #606266;
  }

</style>
